<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" style="overflow-x: hidden;">
<head>
    <meta charset="UTF-8"/>
    <title th:text="${activity.activityName}"></title>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="yes" name="apple-touch-fullscreen"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta content="telephone=no" name="format-detection"/>
    <link th:href="@{/travel/css/style.css}" rel="stylesheet"/>
    <style type="text/css">
        span,dd{
            font-size: 13px;
        }
        .toCalendar span{
            font-size: 15px;
        }
        .toMap span{
            font-size: 15px;
        }
        .label dd{
            margin-left: 0px !important;
            font-size: 10px;
        }
        .main_content_fold {
            height: 270px;
            overflow: hidden;
            padding: 12px 0 0 0;
        }

        .main_content_open {
            height: 100%;
            padding: 12px 0 0 0;
        }
        .main_content_text{
            padding: 8px 12px 12px 12px;
        }
        .leader {
            float: left;
            margin-left: 10px;
            text-align: center;
            width: 60px;
            display: inline-table;
            margin-top: 3px;
        }

        .leader span {
            font-size: 12px;
            display: block;
            width: 60px;
            height: 15px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-top: 6px;
        }

        .leaders {
            height: 137px;
            padding-left: 12px;
        }

        .face_radius {
            border-radius: 50%;
        }

        .headPortraits_li {
            float: left;
            margin-left: 6px;
        }

        .headPortraits {
            height: 45px
        }

        .lookall {
            border-top: 1px solid #ddd;
        }
        .lookall_open span:after{
            content: " ";
            background-image: url(/travel/img/icon_arrow_down_gray.png);
            width: 8px;
            display: inline-block;
            height: 6px;
            margin-left: 5px;
            background-size: contain;
            background-repeat: no-repeat;
        }
        .lookall_fold span:after{
            content: " ";
            background-image: url(/travel/img/icon_arrow_up_gray.png);
            width: 8px;
            display: inline-block;
            height: 6px;
            margin-left: 5px;
            background-size: contain;
            background-repeat: no-repeat;
        }
        .ellipsis_div {
            font-size: 24px;
            width: 24px;
            height: 24px;
            background: #ddd;
            line-height: 10px;
            text-align: center;
            color: #fff;
            font-weight: bold;
        }

        .play-alert {
            position: absolute;
            top: 60px;
            color: white;
            font-size: 16px;
            display: none;
            z-index: 2147483647;
            text-align: center;
            width: 100%;
        }

        .play-alert a {
            color: #19d929;
            margin-top: 15px;
            display: block;
        }

        .explain {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }

        .lineClamp5 {
            -webkit-line-clamp: 5;
        }

        .explain_lookmore {
            position: absolute;
            right: 25px;
            color: #6868ff;
            display: none;
            bottom: 10px;
        }

        .na-download.fixed {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 11;
            background: rgba(0, 0, 0, 0.7);
            text-align: center;
            padding: 3% 10px;
            line-height: 35px;
        }

        .na-download button {
            padding: 6px 8px;
            color: #fff;
            background: rgba(0, 0, 0, 0);
            text-shadow: none;
            border-radius: 4px;
            border: 1px solid #fff;
            font-size: 15px;
            position: relative;
            left: 26%;
        }

        .na-download img:first-child {
            position: absolute;
            left: 24px;
        }

        .na-download span {
            color: #fff;
            font-size: 17px;
            position: absolute;
            left: 80px;
        }
        .personNum{
            color: #828384;
        }

        .star-0 {
            background-position: 0px 0px;
        }

        .star-1 {
            background-position: 0px -13px;
        }

        .star-2 {
            background-position: 0px -26px;
        }

        .star-3 {
            background-position: 0px -39px;
        }

        .star-4 {
            background-position: 0px -52px;
        }
        .star-5 {
            background-position: 0px -65px;
        }
        .video_cover{
            width:100%;
            height:250px;
            position: absolute;
            top: 0;
            text-align: center;
        }
        .sub-title {
            font-weight: 700;
            font-size: 110%;
            margin: 8px 0;
        }
    </style>
</head>
<body style="overflow-x: hidden;">
<div class="single_wraper">
    <div class="header">
        <input id="activityId" th:value="${activity.activityId}" hidden="hidden"/>
        <video th:if="${activity.multiMedia.type == 1}"
               controls="controls" style="width:100%;background: black;height: 250px;" preload="none" id="videoId"
               onplay="singleDetailePageManager.handlePlayStart()"
               onloadeddata="singleDetailePageManager.handleVideoAlert()"

               th:poster="${activity.multiMedia.video.imageUrl}" th:src="${activity.multiMedia.video.videoUrl}">
            您的浏览器不支持视频播放！
        </video>
        <div th:if="${activity.multiMedia.type == 1}" class="video_cover"></div>
        <div class="play-alert network-alert"><span>您正在使用非WIFI网络，播放将产生流量费用</span><a>继续播放</a></div>
        <div class="play-alert loading-alert"><span>正在加载</span></div>
        <div style="overflow: hidden">
        <img class="ac_banner" th:if="${activity.multiMedia.type == 0}" style="width:100%;"
             th:src="${activity.multiMedia.image.imageUrl}"></img>
        </div>
        <div class="toCalendar" id="toCalender">
            <img th:src="@{/travel/img/icon_time.png}" alt=""/>
            <span th:text="${#dates.format(activity.startTime, 'yyyy-MM-dd EEEE')}"></span>
            <label class="icon_right"></label>
        </div>
        <div class="toMap" id="toMap" th:alt="${activity.lat}+','+${activity.lng}">
            <img th:src="@{/travel/img/address.png}" alt=""/>
            <div style="display:inline-block;margin-left: 10px;font-size: 15px">
                <div th:text="'集合地：'+${activity.address}"></div>
                <div th:text="'目的地：'+${activity.destination}"></div>
            </div>
            <label style="top: 32px;" class="icon_right"></label>
        </div>
        <div class="dls">
            <dl>
                <dt class="days"><img th:src="@{/travel/img/days.png}"/></dt>
                <dd th:text="${(activity.activityTime)*10/241} + 1 + 天"></dd>
            </dl>
            <dl>
                <dt class="persens"><img th:src="@{/travel/img/persons.png}"/></dt>
                <dd th:text="${activity.limitNum } + '-' + ${activity.maxNum }+'人'"></dd>
            </dl>
            <dl th:if="${activity.parameter.insurance == true}">
                <dt class="safe"><img th:src="@{/travel/img/safe.png}"/></dt>
                <dd>意外险</dd>
            </dl>
        </div>
    </div>
    <div class="body " style="" id="body">
        <div class="main_content_text main_content_fold" style="word-break:break-word;min-height: 270px" th:utext="${activity.activityIntroduce }"></div>

        <div class="lookall lookall_open"><span>显示全部</span></div>
    </div>
    <div class="attention">
        <h1 class="attentionTitle">注意事项</h1>

        <div class="explain" style="word-break:break-word;">
            <p th:utext="${activity.activityNote }"></p>

            <div class="explain_lookmore">更多</div>
        </div>
    </div>
    <div class="leaders">
        <h1 class="title">执行领队</h1>
        <ul class="leaders_ul" style="overflow: scroll; height: 85px;">
            <li class="leader" th:alt="${master.uid}" th:each="master,masterN : ${activity.masterList}">
                <!--   <img th:src="${master.icon}"/>-->
                <img width="50px" height="50px" class="face_radius" th:if="${master.icon}" th:src="${master.icon}"/>
                <img width="50px" height="50px" class="face_radius" th:if="${master.icon == null}" th:src="@{'/travel/img/icon_avatar.png'}"/>
                <span th:text="${master.name}"></span>
            </li>
        </ul>
    </div>
    <div class="headPortraits">
        <ul class="pics">
            <li class="headPortraits_li like_user" th:if="${userN.index&lt;6}"
                th:each="user,userN : ${activity.userList}">
                <img class="face_radius" th:if="${user.iconUrl}" th:src="${user.iconUrl}"/>
                <img class="face_radius" th:if="${user.iconUrl == null}" th:src="@{'/travel/img/icon_avatar.png'}"/>
            </li>
            <li th:if="${activity.userNum&gt;6}" class="headPortraits_li">
                <div class="ellipsis_div face_radius">...</div>
            </li>
        </ul>
        <div class="personNum">
            <dd th:text="${activity.userNum}+ 人喜欢+''"></dd>
        </div>
        <label class="icon_right"></label>
    </div>
    <div class="comments">
        <h1 class="title" th:text="'评价('+ ${activity.commentNum}+')'" ></h1>
        <ul>
            <li class="comment" th:name="${comment.userName}" th:each="comment,commentN : ${activity.commentList}">
                <div>
                    <img th:src="${comment.iconUrl}"/>
                    <span class="comment_name" th:text="${comment.userName}"></span>
                    <span class="label"><dd th:text="LV. + ${comment.platformLevel}"></dd></span><span
                        th:alt="${comment.commentTime}" class="comment-time right">3分钟前</span>

                </div>
                <div th:class="'stars star-' + ${comment.score}*10/10"></div>
                <div class="content" th:text="${comment.commentContent}"></div>
            </li>
        </ul>
        <div th:if="${activity.commentList.size()==5}" class="lookmore">查看更多<i></i><label class="icon_right"></label></div>
        <div th:if="${activity.commentList.size()==0}" class="lookmore">暂无评论<i></i></div>
    </div>
</div>
<div class="na-download fixed" style="display:none">
    <img width="36px" height="36px" src="/travel/img/new_logo.png"/>
    <span>百灵鸟</span>
    <button>立即打开</button>
    <img class="download-closed" width="20px" height="20px" src="/travel/img/clear.png"/>
</div>
</body>
<script type="text/javascript" th:src="@{/travel/js/zepto.min.js}"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script th:src="@{/travel/js/for_single_detail.js}"></script>
</html>